<template>
    <div>
<div class="search">
    <input  v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音"/>
</div>
<div class="search-content" ref="search" v-if="this.list.length">
<ul>
    <li class="item" v-for="item of list" :key="item.id">{{item.name}}</li>
</ul>
</div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
    export default {
        name:"citySearch",
        data(){
            return {
                keyword:'',
                list:[],
                timer:null
            }
        },
        props:{cities:Object},
        mounted(){
            this.scroll=new Bscroll(this.$refs.search)
        },
        watch:{
            keyword(){
                if(this.timer){clearTimeout(this.timer)}
                this.timer=setTimeout(()=>{
                    const result=[]
                    for(let i in this.cities){
                        this.cities[i].forEach((value)=>{
                            if(value.spell.indexOf(this.keyword)>-1||
                            value.name.indexOf(this.keyword)>-1){
                                result.push(value)
                            }
                        })
                    }
                    this.list=result
                },100)

            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.search
  height: .72rem
  padding: 0 .1rem
  background: $bgColor;
.search-input
  box-sizing: border-box
  width: 100%
  height: .62rem
  padding: 0 .1rem
  line-height: .62rem
  text-align: center
  border-radius: .06rem
  color: #666  
.search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 2.3rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
.item
 line-height: .62rem
 padding-left: .2rem 
 background: #fff
 color: #666     
</style>